<template>
	<view class="dial-animate-wrap">
		<view class="li_tlt" @click="towinningReacord()"><view class="li_tlt_name">中奖记录</view></view>

		<!--   <div class="dial-bg"  :style="rotateStyle"><img src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/dial.png" alt=""></div> -->
		<!-- <view class="available">
			可用积分:2000

		</view> -->
		<view class="li_tlt1">
			<view class="li_tlt_name1">可用积分:{{ points }}</view>
		</view>
		<view class="dial-bg" :style="rotateStyle">
			<!-- <img src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/newdial.png" alt=""/> -->
			<img src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/768734.png" alt="" />
		</view>
		<view class="dial-run" @click="run">
			<view style="margin-top: 70rpx;margin-bottom: 8rpx;">抽奖</view>
			<p>60积分/次</p>
		</view>
		<view class="dial-mork-wrap" @touchmove.prevent.stop v-if="isrun"></view>
		<!-- 抽奖进行中，禁用页面所有操作 z-index: 99; -->

		<!-- 	<view class="reflect">
			<view class="top">
				<icon style="margin-top: 12rpx;" type="success" size="20" />
			</view>
			<view class="button">
				<text class="bf">￥</text>
				<text class="jin">2000</text>
			</view>
		</view> -->
		<view class="statistics">
			<view class="top">
				<view class="left">
					<image style="height: 50rpx;width: 50rpx;border-radius: 50%;margin-top: 25rpx;" :src="avatarUrl" />
					<!-- <image style="margin-bottom: 3rpx;" src="../../static/img/results_active.png" /> -->
					<text class="title">{{ nickName }}</text>
				</view>
				<view class="right">
					<icon style="margin-top: 20rpx;" type="success" size="20" />

					<text class="title1">￥:{{ nextWheelDrawInfo }}</text>
					<!-- 	<u-icon name="arrow-right" color="#FCF7FB"></u-icon> -->
				</view>
			</view>
			<view class="button">
				<icon style="margin-top: 10rpx;margin-right: 10rpx;" type="success" size="20" />
				离体现
				<text style="color: #fff;">{{ nextWheelDrawInfo }}.00</text>
				元，仅差
			</view>
			<view class="button1">
				<text style="color: #FF3957;font-size: 36rpx;">{{ difference | percentFormat_one }}元</text>
				<!-- <text style="color: #FF3957;">00元</text> -->
			</view>
			<u-line-progress
				:percent="platformTransfer.per | percentFormat"
				show-percent="false"
				striped="true"
				striped-active="true"
				active-color="#FB514C"
				inactiveColor="#0055ff"
			></u-line-progress>

			<view class="record" v-if="recordDev.length > 0">
				<view class="left">
					<view class="top1"><icon style="margin-top: 10rpx;" type="success" /></view>
					<view class="button1">
						<text style="font-size: 14rpx;">¥:</text>
						<text style="font-size: 28rpx;">{{ recordDev[0].amount }}</text>
					</view>
				</view>
				<view class="right">
					<view class="top3" @click="toReceive()">
						<image v-if="recordDev[0].status == 0" src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/%E6%9C%AA%E9%A2%86%E5%8F%96.png" />
						<image v-if="recordDev[0].status == 1" src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/%E5%B7%B2%E9%A2%86%E5%8F%96.png" />
						<u-icon name="arrow-right" style="margin-top: 20rpx;" color="#FCF7FB"></u-icon>
					</view>
					<view class="button3"></view>
				</view>
			</view>
		</view>

		<!-- <button class='but' hover-class='none'>邀请好友助力提现</button> -->
		<view class="but" @click="toShare()"><text style="line-height: 120rpx;">邀请好友助力提现</text></view>
		<view class="yiyou">以下好友已经助力过，快来一起助力吧！</view>
		<view class="bargain12">
			<view class="item" v-for="(item, index) in helpList" :key="index"><image :src="item.headimage" /></view>
		</view>
	</view>
</template>
<script>
import { pointWheelApi, saveWheelRecord, getNextWheelDrawInfo, saveWheelAmount, getWheelDrewRecordPage, getHelperList } from '@/api/results.js';
let timeOutStopLocation;
export default {
	components: {},
	data() {
		return {
			platformTransfer: {
				per: 0.0,
				positionNo: 0,
				totalAmount: 0
			},
			isrun: false,
			welfareList: [],
			rotateAngle: 0, // 旋转角度
			manageAngle: 0,
			welfare: '', //中奖礼物
			preAngle: 0,
			config: {
				duration: 4000, // 总旋转时间 ms级
				circle: 8, // 旋转圈数
				mode: 'ease-in-out' // 由快到慢 惯性效果都省了
			},
			cricleAdd: 0, // 第几次抽奖
			drawIndex: 0, // 中奖索引 转盘图片排序 指针右手开始 0-...
			points: 0,
			nickName: '',
			avatarUrl: '',
			nextWheelDrawInfo: 100, //下一次可提现金额
			balance: 0, //大转盘获取金额
			difference: 100, //相差的金额
			pageIndex: 0, //页数
			pageSize: 30, //条数
			total: 1,
			recordDev: [],
			helpList: [],
			type: 0,
			drawNumber: 0
		};
	},

	mounted() {
		this.getNextWheelDrawInfo();
		this.getPointWheelInfo('common');
		this.nickName = uni.getStorageSync('nickName');
		this.avatarUrl = uni.getStorageSync('avatarUrl');
		this.$forceUpdate();
		// this.timeOutStopLocation = setInterval(() => {
		// 	this.getWheelDrewRecordPage();
		// }, 3000);
		this.getWheelDrewRecordPage();
		this.getHelperList();
	},
	computed: {
		rotateStyle() {
			const _c = this.config;
			return `
        -webkit-transition: transform ${_c.duration}ms ${_c.mode};
        transition: transform ${_c.duration}ms ${_c.mode};
        -webkit-transform: rotate(${this.rotateAngle}deg) ;
		transform-origin: center;
        transform: rotate(${this.rotateAngle}deg) ;`;
		}
	},
	// props: {
	//   httpData: {}, // 接口调用所需参数
	//   stateData: {
	//     type: Object,
	//     default: () => {
	//       return {
	//         coin: 1000, // 超级币数量

	//         prize_img: '' // 转盘图片
	//       }
	//     }
	//   }
	// },
	filters: {
		percentFormat(value) {
			if (!value) {
				return 0;
			}
			return parseInt(value * 100);
		},
		percentFormat_one(value) {
			if (!value) {
				return 0.0;
			}
			return parseFloat(value).toFixed(2);
		}
	},
	destroyed() {
		clearInterval(this.timeOutStopLocation);
	},
	methods: {
		//获取助力好友列表
		async getHelperList() {
			let params = {};
			const res = await getHelperList(params);
			// console.log(222, res)
			if (res.data.code == 0 && res.data.message == 'success') {
				this.helpList = res.data.data;
			}
		},
		//获取中奖记录
		towinningReacord() {
			uni.navigateTo({
				url: '../../activePages/pages/winning_record/winning_record'
			});
			clearInterval(this.timeOutStopLocation);
		},
		//跳提现记录
		toReceive() {
			uni.navigateTo({
				url: '../../activePages/pages/receive/receive'
			});
			clearInterval(this.timeOutStopLocation);
		},
		//获取提现记录
		async getWheelDrewRecordPage() {
			if (this.recordDev.length > 0 && this.recordDev.length >= this.total) return;
			let params = {
				pageIndex: 0,
				pageSize: this.pageSize
			};
			const res = await getWheelDrewRecordPage(params);
			// console.log(666,res)
			if (res.statusCode === 200) {
				this.recordDev = res.data.data === null ? [] : [...this.recordDev, ...res.data.data.rows];
				this.total = res.data.data.total;
				this.$forceUpdate();
				// this.pageIndex++;
			}
		},
		//获取下一次可提现金额
		async getNextWheelDrawInfo() {
			let params = {};
			// console.log(params.welfare)
			const res = await getNextWheelDrawInfo(params);
			// console.log(222,res)
			if (res.statusCode == 200) {
				// this.nextWheelDrawInfo = res.data.data.amount;
				this.balance = res.data.data.wheelAmount;
				if (this.balance >= this.nextWheelDrawInfo) {
					console.log(1010, this.balance);
					this.platformTransfer.per = 1.0;
					this.difference = 0;
					this.saveWheelAmount(this.nextWheelDrawInfo);
					// 跳弹框
					this.$emit('openModelPrise');
					//this.run();
				} else {
					this.platformTransfer.per = this.balance / this.nextWheelDrawInfo;
					this.difference = Math.abs(this.nextWheelDrawInfo - res.data.data.wheelAmount);
				}
			}
		},
		//保存已经可以提现的记录信息
		async saveWheelAmount(nextWheelDrawInfo) {
			let params = {
				welfare: nextWheelDrawInfo
			};
			const res = await saveWheelAmount(params);
			// console.log(222, res);

			if (res.statusCode == 200) {
				this.drawNumber = 0;
				this.getNextWheelDrawInfo();

				this.getWheelDrewRecordPage();
				// this.getNextWheelDrawInfo();
			}
			// console.log(222,res)
		},
		//调整至分享
		toShare() {
			// uni.navigateTo({
			// 	url: '../../activePages/pages/share/share'
			// });
			uni.redirectTo({
				 	url: '../../activePages/pages/share/share'
			})
		},
		//转盘转动
		async run() {
			//debugger;type=0为普通的转，1为积分  2为提现
			if (this.points < 60) {
				// uni.showToast({
				// 	title: '积分不足！',
				// 	icon: 'success',
				// 	success() {}
				// });
				this.$emit('openModelActive',this.difference);
				return;
			}
			if (this.isrun) return;
			//获取礼物
			//const data = await this.goWelfare(this.manageAngle)
			//可以作为弹窗等信息展示 1 3 5 7 9 11 13 15
			this.$emit('draw_fin', 'start');
			this.saveWheelRecord();

			//this.$set(this.stateData, 'coin', 0) // 更新数据，此处仅为示例，推荐使用 draw_fin方法的 start/fin 进行相应数据更新

			//this.$set( this.points, this.points-60)
			this.points = this.points - 60;
			this.isrun = true;
			//debugger;
			if (this.cricleAdd > 0) {
				this.rotateAngle = this.manageAngle + this.config.circle * 360 * (this.cricleAdd + 2);
			} else {
				this.rotateAngle = this.manageAngle + this.config.circle * 360;
			}
			//this.preAngle=this.manageAngle;
			console.log(this.manageAngle);
			//this.rotateAngle =this.config.circle * 360 * this.cricleAdd -(22.5 + this.drawIndex * 45)
			// 圈数位置解析
			// this.config.circle * 360 * this.cricleAdd 顺时针总圈数/累积总圈数
			// 22.5 + this.drawIndex * 45 ===> (奖品位置 === this.drawIndex * 45) (指针中间位置 === 22.5)

			this.cricleAdd++;
			this.drawIndex++;
			setTimeout(() => {
				this.$emit('draw_fin', 'fin');
				this.isrun = false;
				if (this.type == 0) {
					uni.showToast({
						title: '恭喜中的' + this.welfare + '元',
						icon: 'success',
						success() {}
					});
				}
				if (this.type == 1) {
					uni.showToast({
						title: '恭喜中的' + this.welfare + '积分',
						icon: 'success',
						success() {}
					});
				}
				if (this.type == 2) {
					uni.showToast({
						title: '恭喜中的提现资格',
						icon: 'success',
						success() {}
					});
				}
				if (this.type == 3) {
					uni.showToast({
						title: '恭喜中的再来一圈',
						icon: 'success',
						success() {}
					});
				}
				this.getPointWheelInfo();
				this.getNextWheelDrawInfo();
			}, this.config.duration);
		},
		//
		// async runMoney() {
		// 	if(this.drawNumber>0){
		// 		return;
		// 	}
		// 	if (this.isrun) return;
		// 	//获取礼物
		// 	//const data = await this.goWelfare(this.manageAngle)
		// 	//可以作为弹窗等信息展示 1 3 5 7 9 11 13 15
		// 	this.$emit('draw_fin', 'start');

		// 	 this.saveWheelRecord();
		// 	this.isrun = true;
		// 	//debugger;
		// 	if (this.cricleAdd > 0) {
		// 		this.rotateAngle = 22.5 + this.config.circle * 360 * (this.cricleAdd + 2);
		// 	} else {
		// 		this.rotateAngle = 22.5 + this.config.circle * 360;
		// 	}
		// 	//this.preAngle=this.manageAngle;
		// 	console.log(this.manageAngle);
		// 	//this.rotateAngle =this.config.circle * 360 * this.cricleAdd -(22.5 + this.drawIndex * 45)
		// 	// 圈数位置解析
		// 	// this.config.circle * 360 * this.cricleAdd 顺时针总圈数/累积总圈数
		// 	// 22.5 + this.drawIndex * 45 ===> (奖品位置 === this.drawIndex * 45) (指针中间位置 === 22.5)

		// 	this.cricleAdd++;
		// 	this.drawIndex++;
		// 	setTimeout(() => {
		// 		this.$emit('draw_fin', 'fin');
		// 		this.isrun = false;
		// 		if (this.type == 0) {
		// 			uni.showToast({
		// 				title: '恭喜中的' + this.welfare + '元',
		// 				icon: 'success',
		// 				success() {}
		// 			});
		// 		}
		// 		if (this.type == 1) {
		// 			uni.showToast({
		// 				title: '恭喜中的' + this.welfare + '积分',
		// 				icon: 'success',
		// 				success() {}
		// 			});
		// 		}
		// 		if (this.type == 2) {
		// 			uni.showToast({
		// 				title: '恭喜中的提现资格',
		// 				icon: 'success',
		// 				success() {}
		// 			});
		// 		}
		// 		if (this.type == 3) {
		// 			uni.showToast({
		// 				title: '恭喜中的再来一圈',
		// 				icon: 'success',
		// 				success() {}
		// 			});
		// 		}
		// 		this.saveWheelAmount(this.nextWheelDrawInfo);
		// 		this.getPointWheelInfo("common");
		// 		// this.getNextWheelDrawInfo();

		// 		let results = {};
		// 		results.date = '第' + this.cricleAdd + '次';
		// 		results.res = '中得奖金：' + this.welfare + '元';
		// 		this.welfareList.push(results);
		// 	}, this.config.duration);
		// 	this.drawNumber++;
		// },
		async saveWheelRecord() {
			let value = 0;
			if (this.type == 0 || this.type == 1) {
				value = this.welfare;
			}
			if (this.type == 2) {
				value = 0;
			}
			if (this.type == 3) {
				value = 60;
			}
			let params = {
				welfare: value,
				type: this.type
			};
			// console.log(params.welfare)
			const res = await saveWheelRecord(params);
		},
		goDraw() {
			// 请求接口拿到中奖商品
			// 加下自己项目的样式 loading 用户体验
			return new Promise(async (resolve, reject) => {
				// await 奖品接口
				resolve({
					msg: '抽奖明细'
				});
			});
		},
		async getPointWheelInfo(type) {
			let params = {};

			params.flag = 'common';

			const res = await pointWheelApi(params);
			// console.log(7777, res);
			if (res.statusCode === 200) {
				// if (this.cricleAdd == 0) {
				// 	this.points = res.data.data.points;
				// 	this.$forceUpdate()
				// }
				this.type = res.data.data.type;
				this.manageAngle = res.data.data.angle;
				this.welfare = res.data.data.welfare;
				this.points = res.data.data.points;
				if (this.points < 60) {
					this.$emit('openModelActive',this.difference);
				}

				this.$forceUpdate();

				// this.welfareList=res.data.data.welfareList;

				// uni.hideLoading()
				// this.switching = res.data.data
				// this.currSwitch = res.data.data[0].id
				// this.deviceListApi()
			}
		}
	}
};
</script>
<style scoped lang="scss">
.dial-mork-wrap {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
}

.dial-animate-wrap {
	width: 100%;
	height: 100%;
	margin-top: 2rem;
	position: relative;
	display: block;
	text-align: center;
	justify-content: center;

	// overflow-y: hidden;
	.dial-bg {
		img {
			width: 19rem;
			height: 19rem;
			margin-left: -6.1rem;
		}
	}

	.status_box_scroll {
		height: 130rpx;
		overflow-y: auto;
	}

	.dial-run {
		width: 6rem;
		height: 6rem;
		background: url('https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/dial-center-icon.png') no-repeat;
		background-size: contain;
		position: absolute;
		left: 0;
		right: 0;
		top: 9rem;

		// margin: auto;
		margin-left: 0.45rem;
		text-align: center;

		div {
			font-size: 0.7rem;
			font-weight: bold;
			color: #ff1717;
			line-height: 0.5rem;
			padding-top: 2.7rem;
			padding-bottom: 0.21rem;
		}

		p {
			font-size: 0.5rem;
			font-weight: bold;
			color: #834f36;
			line-height: 0.4rem;
		}
	}

	.yiyou {
		height: 60rpx;
		width: 600rpx;
		margin-left: -6.1rem;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
		font-size: 28rpx;
		border-bottom: 1rpx solid #ff1717;
		margin-top: 20rpx;
	}

	.bargain12 {
		padding: 15rpx;
		height: 290rpx;
		width: 600rpx;
		margin-left: -6.8rem;
		border-radius: 16rpx;
		display: flex;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		flex-wrap: wrap;

		.item {
			height: 80rpx;
			width: 80rpx;
			margin-bottom: 15rpx;
			margin-right: 10rpx;
			border-radius: 50%;

			image {
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
			}
		}
	}

	.but {
		margin-top: 60rpx;
		margin-left: -6.6rem;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/05.png');
		background-size: 100% 100%;
		width: 600rpx;
		height: 140rpx;

		text-align: center;
		font-size: 1.6em;
		color: white;
		background-color: rgba(255, 255, 255, 0);
	}

	.statistics {
		height: 400rpx;
		width: 600rpx;
		background-color: #fed400;
		margin-left: -6.6rem;
		border-radius: 16rpx;
		box-shadow: 0rpx 12rpx 12rpx rgba(111, 147, 247, 0.05);
		filter: drop-shadow(0rpx 16rpx 32rpx rgba(185, 185, 185, 0.22));
		padding-left: 70rpx;
		padding-right: 70rpx;

		.top {
			height: 80rpx;
			background-color: #c6525d;
			border-bottom-left-radius: 60rpx;
			border-bottom-right-radius: 60rpx;
			display: flex;
			justify-content: space-between;
			padding-left: 8rpx;
			padding-right: 8rpx;

			.left {
				height: 80rpx;
				display: flex;
				line-height: 80rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;

				image {
					height: 40rpx;
					width: 40rpx;
					margin: auto 10rpx auto 10rpx;
					position: relative;
					top: -10rpx;
				}

				.title {
					color: #fcf7fb;
					font-size: 28rpx;
					line-height: 80rpx;
					position: relative;
					top: -20rpx;
					margin-bottom: 20rpx;
				}
			}

			.right {
				height: 80rpx;
				display: flex;
				line-height: 80rpx;
				display: flex;

				.title1 {
					color: #fcf7fb;
					font-size: 28rpx;
					margin: auto 8rpx auto 8rpx;
				}
			}
		}

		.button {
			height: 60rpx;
			line-height: 60rpx;
			// background-color: #3FBBFB;
			padding-left: 8rpx;
			padding-right: 8rpx;
			text-align: center;
			line-height: 60rpx;
			font-weight: bold;
			color: #fff;
			display: flex;
		}

		.button1 {
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 8rpx;
			padding-right: 8rpx;
			text-align: center;
			justify-content: center;
			line-height: 60rpx;
			font-weight: bold;
			color: #c6525d;
			display: flex;
		}

		.record {
			height: 120rpx;
			margin-top: 15rpx;
			border-radius: 16rpx;
			display: flex;

			.left {
				height: 120rpx;
				width: 120rpx;
				// background-color: #FFA500;
				border-radius: 16rpx;
				border: 1rpx solid #fe420e;

				.top1 {
					width: 119rpx;
					height: 60rpx;
					background-color: #fefefc;
					border-top-left-radius: 16rpx;
					border-top-right-radius: 16rpx;

					image {
						width: 119rpx;
						height: 60rpx;
						border-top-left-radius: 16rpx;
						border-top-right-radius: 16rpx;
					}
				}

				.button1 {
					height: 60rpx;
					color: #fefefc;
					background-color: #fe420e;
					display: flex;
					border-bottom-left-radius: 16rpx;
					border-bottom-right-radius: 16rpx;
				}
			}

			.right {
				height: 120rpx;

				.top3 {
					height: 80rpx;
					width: 500rpx;
					display: flex;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-top: 30rpx;
						margin-right: 150rpx;
						margin-left: 100rpx;
						z-index: 9999999;
					}
				}

				.button3 {
					height: 15rpx;
					width: 340rpx;
					border-radius: 20rpx;
					background-color: #f9769f;
					margin-top: 20rpx;
					display: flex;
					position: relative;
					right: 0;
					opacity: 0.5;
				}
			}
		}
	}

	.reflect {
		height: 120rpx;

		border: 8rpx solid #c6525d;
		margin-bottom: 10rpx;
		// background-color: #FF5003;
		border-radius: 16rpx;
		box-shadow: 0rpx 12rpx 12rpx rgba(111, 147, 247, 0.05);
		filter: drop-shadow(0rpx 16rpx 32rpx rgba(185, 185, 185, 0.22));
		// position: absolute;
		// top: -190rpx;

		// opacity: 0.5;
		.top {
			height: 40rpx;
			width: 200rpx;
			text-align: center;

			image {
				height: 40rpx;
				width: 180rpx;
				margin-top: 10rpx;
				border-radius: 8rpx;
			}
		}

		.button {
			height: 80rpx;
			width: 200rpx;
			text-align: center;
			justify-content: center;
			display: flex;
			line-height: 80rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;

			.bf {
				color: #fbfbf2;
				font-weight: bold;
				font-size: 28rpx;
			}

			.jin {
				color: #fbfbf2;
				font-weight: bold;
				font-size: 46rpx;
			}
		}
	}

	.li_tlt {
		width: 150rpx;
		height: 51rpx;
		background: linear-gradient(0deg, #facc22 0%, #f83600 100%);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 40rpx;
		right: 0;
		z-index: 999999999;

		.li_tlt_name {
			width: 268rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			font-size: 26rpx;
			font-weight: bold;
			color: #ffffff;
		}

		.rai_bg {
			width: 9rpx;
			height: 9rpx;
			background: #ffffff;
			border-radius: 50%;
		}
	}

	.li_tlt1 {
		width: 300rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #facc22 0%, #f83600 100%);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: -1.3rem;

		.li_tlt_name1 {
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #ffffff;
		}

		.rai_bg {
			width: 9rpx;
			height: 9rpx;
			background: #ffffff;
			border-radius: 50%;
		}
	}
}
</style>
